
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>EShopManager</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/lib/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/stylesheets/theme.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/lib/font-awesome/css/font-awesome.css" />
    <script src="${pageContext.request.contextPath}/static/lib/jquery-1.7.2.min.js" type="text/javascript"></script>

    <!-- TreeTable -->
    <link href="${pageContext.request.contextPath}/static/lib/treetable/jquery.treetable.css" rel="stylesheet" type="text/css" />
    <link href="${pageContext.request.contextPath}/static/lib/treetable/jquery.treetable.theme.default.css" rel="stylesheet" />
    <script src="${pageContext.request.contextPath}/static/lib/treetable/jquery.treetable.js" type="text/javascript"></script>
<%--    <script type="text/javascript">--%>
<%--        $(function() {--%>
<%--            $("#example-basic-expandable").treetable({--%>
<%--                expandable : true--%>
<%--            });--%>
<%--        });--%>
<%--    </script>--%>
    <!--------------->


    <!-- Demo page code -->
    <style type="text/css">
        #line-chart {
            height: 300px;
            width: 800px;
            margin: 0px auto;
            margin-top: 1em;
        }

        .brand {
            font-family: georgia, serif;
        }

        .brand .first {
            color: #ccc;
            font-style: italic;
        }

        .brand .second {
            color: #fff;
            font-weight: bold;
        }
    </style>

</head>
<body>

<%--顶部--%>
<c:import url="top.jsp"></c:import>

<%--左部页面--%>
<c:import url="left.jsp"></c:import>


<!-- 内容区 -->
<div class="content">
    <div class="header">
        <h1 class="page-title">分类管理</h1>
    </div>

    <ul class="breadcrumb">
        <li><a href="typemanager.jsp">分类管理</a> <span class="divider">/</span></li>
        <li class="active">分类列表管理</li>
    </ul>

    <div class="container-fluid">

        <div class="row-fluid">

            <div class="block">
                <a href="#page-filter" class="block-heading" data-toggle="collapse">增加分类</a>
                <div id="page-filter" class="block-body collapse in">
                    <div class="search-well">
                        <form  class="form-inline" role="search"
                               action="#" method="post">
                            <select class="form-control" id="selType">
                                <option value="" selected="selected">--请选择--</option>
                                <option value="0">一级分类</option>
                                <option value="1">二级分类</option>
                            </select>

                            <input type="text" class="form-control" placeholder="请输入一级分类名称"
                                   name="parent_type_name" />

                            <select class="form-control" name="type_id">
<%--                                <option value="" selected="selected">--请选择一级分类--</option>--%>
                            </select>
                            <input type="text" class="form-control" placeholder="请输入二级分类名称"
                                   name="child_type_name" />


                            <button class="btn btn-primary" id="btnSave">
                                <i class="icon-save"></i> 保存
                            </button>

                        </form>
                    </div>
                </div>
            </div>
        </div>


        <div class="row-fluid">

            <table id="example-basic-expandable" class="table">
                <thead>
                <tr id="theTableTitle">
                    <th>分类名称</th>
                    <th>分类类型</th>
                    <th>类型编号</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${typeList}" var="info">
                    <tr data-tt-id="type_id">
                        <td>${info.typeName}</td>
                       <c:choose>
                           <c:when test="${info.parentId<=0}">
                               <td>一级分类</td>
                           </c:when>
                           <c:otherwise>
                               <td>二级分类</td>
                           </c:otherwise>
                       </c:choose>
                        <td>${info.typeId}</td>
                        <td>
                            <a href="/books/queryinfo.action?book_id=" title="编辑"><i class="icon-pencil"></i></a>
                            <a href="javascript:deleteClick(${info.typeId})" title="删除"><i class="icon-remove"></i></a>
                        </td>
                    </tr>
                </c:forEach>



                </tbody>

            </table>

        </div>

        <!-- 底部页面 -->
        <c:import url="footer.jsp"></c:import>

    </div>


</div>

<script src="${pageContext.request.contextPath}/static/lib/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/lib/tooltips.js"></script>
<script type="text/javascript">
    $("[rel=tooltip]").tooltip();

    //加载一级分类列表
    function loadParentTypeList(){
        var url="${pageContext.request.contextPath}/type/TypeSelectOne";
        $.post(url,function(response){


            var selectInnerHTML="<option value=''>--请选择一级分类--</option>";
            for (var i = 0; i < response.listOne.length; i++) {
                var typeInfo=response.listOne[i];
                selectInnerHTML+="<option value='"+typeInfo.typeId+"'>"+typeInfo.typeName+"</option>";
            }
            $("select[name='type_id']").html(selectInnerHTML);

        });
    }

    $(function() {
        $('.demo-cancel-click').click(function() {
            return false;
        });

        //初始化隐藏3个子输入框
        $("input[name='parent_type_name']").hide();
        $("select[name='type_id']").hide();
        $("input[name='child_type_name']").hide();
        //加载一级分类列表
        loadParentTypeList();


        //选择一级分类、二级分类
        $("#selType").change(function(){
            var value=$(this).val();
            if (value=='0') {//选择了一级分类
                $("input[name='parent_type_name']").show();
                $("select[name='type_id']").hide();
                $("input[name='child_type_name']").hide();
            }
            if (value=='1') {//选择了二级分类
                $("input[name='parent_type_name']").hide();
                $("select[name='type_id']").show();
                $("input[name='child_type_name']").show();
            }
            if (value=='') {//没有选择
                $("input[name='parent_type_name']").hide();
                $("select[name='type_id']").hide();
                $("input[name='child_type_name']").hide();
            }
        });


        //保存按钮点击
        $("#btnSave").click(function(){

            var selType=$("#selType").val();
            if(selType=='0'){//选择了一级分类
                var parent_type_name=$("input[name='parent_type_name']").val();
                if (parent_type_name=='') {
                    show_err_msg("请输入一级分类名称");
                }else{
                    show_loading();
                    var url="${pageContext.request.contextPath }/type/TypeInst";
                    var data={
                        type_name:parent_type_name,
                        parent_id:selType
                    };
                    $.post(url,data,function(response){
                        //var jsonData=$.parseJSON(response);
                        if (response.isok) {
                            show_msg('操作成功',"${pageContext.request.contextPath }/type/typeView");
                        }

                    });
                }

            }else if(selType=='1'){//选择了二级分类
                var type_id=$("select[name='type_id']").val();
                var child_type_name=$("input[name='child_type_name']").val();
                if (type_id=='') {
                    show_err_msg("请选择一级分类");
                }else if (child_type_name=='') {
                    show_err_msg("请输入二级分类名称");
                }else{
                    show_loading();
                    var url="${pageContext.request.contextPath }/type/TypeInst";
                    var data={
                        type_name:child_type_name,
                        parent_id:type_id
                    };
                    $.post(url,data,function(response){
                        //var jsonData=$.parseJSON(response);
                        if (response.isok) {
                            show_msg('操作成功',"${pageContext.request.contextPath }/type/typeView");
                        }

                    });
                }

            }else{//未选择
                show_err_msg("请选择您要增加的类型");
            }

            //禁止表单提交
            return false;

        });

    });

    //删除数据
        function deleteClick(type_id){
            var url="${pageContext.request.contextPath}/type/deleteOne";
            var 参数={
                type_id:type_id
            }
            if(confirm("确定删除吗？")){
                $.post(url,参数,function(response){
                    //var jsonData=$.parseJSON(response);
                    if (response.isok) {
                        show_msg('删除成功',"${pageContext.request.contextPath }/type/typeView");
                    }else {
                        show_err_msg("删除失败");
                    }

                });
            }


        }



</script>

</body>
</html>

